<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>模板语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--    1. @keydown 按下
           @keyup  松开【常用】
-->
    <input type="text" placeholder="任何一个键都提示" @keyup="showInfo">
    <br/>
<!--    2.vue中常用的按键别名：
        回车=>enter
        删除=>delete
        退出=>esc
        空格=>space
        换行=>tab
        上=>up
        下=>down
        左=>left
        右=>right -->
    <input type="text" placeholder="回车提示" @keyup.enter="showInfo">
    <br/>
<!--    3. CapS Lock键 -->
    <input type="text" placeholder="CapS Lock" @keyup.caps-lock="showInfo">
    <br/>
<!--    4. 系统按键
          第一种触发条件 :按下相应的按键的同时，再按下其他键，随后释放其他键，事件才能生效
          第二种触发条件 :配合keydown首使用-->
    <input type="text" placeholder="shift（任意辅助键）" @keyup.shift="showInfo">
    <br/>
    <input type="text" placeholder="shift（@keydown）" @keydown.shift="showInfo">
    <br/>
<!--        5.可以自定义键名，不推荐-->

</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip =false
    new Vue({
        el:"#root",
        data:{
            name: "hello",
            url: 'http://www.baidu.com'

        },
        methods:{
          showInfo(event){
              console.log("按键编码:"+event.keyCode)
              console.log(event.target.value)
          }
        }

    })
</script>
</html>
